<template>
  <div id="mine">
    <!-- 顶部导航栏 -->
    <router-link to="/mypage">
       <van-nav-bar title="我的档案" left-text="返回" left-arrow />
    </router-link>

    <van-cell-group inset>
      <van-cell title="头像">
        <template #default>
          <van-image
        :src="`${avator}`"
        round
        cover
        width="3.5rem"
        height="3.5rem"
      />
        </template>
      </van-cell>

       <van-cell title="用户名">
        <template #default>
          <span>{{uname}}</span>
        </template>
       </van-cell>
       
       <van-cell title="手机号">
        <template #default>
          <span>{{phone}}</span>
        </template>
       </van-cell>
      
       <van-cell title="性别">
        <template #default>
          <span>{{sex}}</span>
        </template>
       </van-cell>

       <van-cell title="身份证号">
        <template #default>
          <span>{{idcard}}</span>
        </template>
       </van-cell>

       <van-cell title="地址">
        <template #default>
          <span>{{address}}</span>
        </template>
       </van-cell>
      
    </van-cell-group>
    <!-- <my-tabbar></my-tabbar> -->
  </div>
</template>

<script>

export default{
  data(){
    return{
      avator:'',
      uname:'',
      phone:'',
      sex:true,
      idcard:'',
      address:''
    }
  },
  methods: {
    select(){
      this.axios
      .get(`/user/avatar?uid=${this.$store.state.uid}`)
      .then((result) => {
        // 获取用户名和用户图片 渲染到界面
        console.log(result);
        this.uname = result.data.results[0].uname;
        this.avator = result.data.results[0].avator;
        this.phone = result.data.results[0].phone;
        this.sex = result.data.results[0].sex?'男':'女';
        this.idcard = result.data.results[0].id_card;
        this.address = result.data.results[0].address;
      });

    } 
  },

   created() {
    this.select();
  },
}
</script>

<style scoped>
  #mine /deep/ .van-cell__title{
    margin: auto;
  }
</style>